Photo on kobiton.com

前言

小弟在上週藉由之前所介紹的 Appium 內容統整 完成了簡單的 APP 自動化測試
但是上週的內容介紹完 總覺得有點空虛
左思右想了一下 小弟發現好像缺少了 report
俗話說的好 人類是視覺化動物
沒有直觀的 report 對小弟來說總是缺少了些什麼東西

而為了達成這件事情，可以透過程式語言的框架來產生 report
像是小弟是使用 JavaScript 撰寫 就可以使用 Jest, Mocha... 來達成
但是因為之前已經介紹過 Jest 所以小弟這次就以 Mocha 為主
如果想要看 Jest 文章的大哥大姐 可以再自行參考
鼠年全馬鐵人挑戰 WEEK 18：Jest (上)
鼠年全馬鐵人挑戰 WEEK 19：Jest (下)

介紹 Mocha

Photo on kobiton.com by GauravShukla

Mocha 是一個功能豐富的 JavaScript 測試框架
可以在 Node.js 和瀏覽器中運行

安裝 Mocha

因為 Mocha 使用 Node.js 和 npm 作為執行環境
因此在使用時 須先安裝 Node.js 與 npm

$ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"    # 安裝 homebrew
$ brew install node    # 安裝 node

在 Appium 的測試專案底下 安裝 mocha
$ npm install mocha

修改測試

因為 Mocha 會執行 test 資料夾底下的測試
因此在開始前 需要先建立一份 test 的資料夾
$ mkdir test

並將上次的測試檔案拉近該 test 資料夾底下

// javascript

const wdio = require("webdriverio");
const assert = require("assert");

const opts = {
    path: '/wd/hub',
    port: 4723,
    capabilities: {
        platformName: "Android",
        platformVersion: "10",
        deviceName: "R58N12607JM",
        appPackage: "com.sec.android.app.popupcalculator",
        appActivity: "com.sec.android.app.popupcalculator.Calculator",
        automationName: "UiAutomator2"
    }
};

async function main() {
    const client = await wdio.remote(opts);

    const one = await client.$('//android.widget.Button[@content-desc="1"]');
    const plus = await client.$('//android.widget.Button[@content-desc="加號"]');
    const result = await client.$('android.widget.TextView')
    await one.click();
    await plus.click();
    await one.click();
    const value = await result.getText();
    assert.equal(value, '2');

    await client.deleteSession();
}

main();

接下來就要進行程式改造
而需要改的部分只有測試主體 function
改完後整體的樣子大概是下面的樣子

// javascript

const wdio = require("webdriverio");
const assert = require("assert");

const opts = {
    path: '/wd/hub',
    port: 4723,
    capabilities: {
        platformName: "Android",
        platformVersion: "10",
        deviceName: "R58N12607JM",
        appPackage: "com.sec.android.app.popupcalculator",
        appActivity: "com.sec.android.app.popupcalculator.Calculator",
        automationName: "UiAutomator2"
    }
};

describe('Create Android session', function() {
    let client;
    before(async function() {
        client = await wdio.remote(opts);
    });
    after(async function() {
        await client.deleteSession();
    })
    it('Check arithmetic result should correct', async function() {
        const one = await client.$('//android.widget.Button[@content-desc="1"]');
        const plus = await client.$('//android.widget.Button[@content-desc="加號"]');
        const result = await client.$('android.widget.TextView')
        await one.click();
        await plus.click();
        await one.click();
        const value = await result.getText();
        assert.equal(value, '2');
    });
});

在改造後雖然執行方式都一樣
但是多了一些東西 小弟就稍微說明一下

• describe: 稱為測試套件 (test suite)
  簡單來說就有點像是群組的概念，將相同的測試案例歸類
  以此向上方的舉例，如果要將 describe 拿掉也是沒有問題的
  而 describe 是一個函數，該函數有兩個參數要帶
  第一個參數是 test suite 的名稱
  第二個參數是實際要執行的函數
• it: 稱為測試案例 (test case)
  簡單來說就有點像是群組裡的成員，將相關的案例歸類在同一個 describe
  而 it 也是一個函數，，該函數也有兩個參數要帶
  第一個參數是 test case 的名稱
  第二個參數是實際要執行的函數
• before
  這個功能已經是非常常見的了
  也就是整個測試開始前所執行的指令
  小弟將開啟 Appium Server 的操作搬進 brfore 中
• after
  這個功能也是非常常見的
  剛好跟 before 相反，是整個測試結束後執行的指令
  小弟將關閉 Appium Server 的操作搬進 after 中

安裝 Report

report 的樣式有很多種
搜尋關鍵字：mocha html report
小弟這邊選擇用 mochawesome 來做示範
$ npm install mochawesome

執行測試

接著就跟上週說的步驟差不多了
開啟 “APP 自動化測試 - 第二集” 中所介紹的 "安裝 appium desktop"
確認該輸入的設定值已完成輸入 即可點擊 Start Server 進入 Log 頁面

最後在 package.json 文件中的 script 加上
"mocha": "mocha --reporter mochawesome --timeout 10000"

• mocha: 所使用的 JavaScript 框架
• reporter: 所指定的 report 工具
• timeout: 設定超時的時間，預設為2000
  因為啟動 Appium Server 需要一點時間
  所以在這邊設定要拉長超時的時間

接著執行 $ npm run appium

查看 Report

測試執行完可以在 mochawesome-report 資料夾底下找到 report
預設的檔案名稱為 mochawesome.html

結尾

以上是小弟這週的分享內容
主要是透過框架間接呈現可視化的 report

如果有疑問或是有錯誤，還請各位大哥大姐提點。
小弟將繼續往下週邁進。 ─=≡Σ((( つ•̀ω•́)つ

參考文件：

參考網站

• Mocha - the fun, simple, flexible JavaScript test framework
• mochawesome - npm

相關文章

• 鼠年全馬鐵人挑戰 WEEK 21：APP 自動化測試 - 第二集
  
• 测试框架 Mocha 实例教程